<template>
  <a-card class="card" :bordered="false">
    <a-form :form="form">
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="型号/编码"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <a-input
              ref="materialInput"
              allow-clear
              placeholder="请输入物料型号/编码"
              :disabled="materialLock"
              v-decorator="['materialCode', {rules: [{required: true, message: '请输入物料型号/编码！'}]}]"
              @pressEnter="pressEnterMetarialCode">
              <a-icon slot="prefix" title="解/锁定物料" :type="materialLock ? 'lock' : 'unlock'" :style="materialLock ? 'color:red' : 'color:rgba(0, 0, 0, 0.65)'" @click="toggleMaterialLock"/>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="SN/LOT"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <a-input ref="barcodeInput" allow-clear placeholder="请输入SN/LOT" v-decorator="['barcode', {rules: [{required: true, message: '请输入SN/LOT！'}]}]" @pressEnter="pressEnterBarCode"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="管理模式"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <a-radio-group v-decorator="['barcodeType', {rules: [{ required: true, message: '请选择管理模式！' }]}]" :options="barcodeTypeOptions" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="数量"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <a-input ref="qtyInput" allow-clear placeholder="请输入数量" v-decorator="['qty', {rules: [{required: true, message: '请输入数量！'}]}]" @pressEnter="pressEnterQty"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script>
  import { getOneForScan } from '@/api/modular/main/base/material/materialManage'
  import { selectByBarcode } from '@/api/modular/main/stock/stockManage'
  import { validateNum } from '@/utils/validate'
  export default {
    data () {
      return {
        materialLock: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        currentData: { qty: 1 },
        barcodes: [],
        form: this.$form.createForm(this),
        barcodeTypeOptions: [
          { label: '单件管理', value: 1 },
          { label: '批量管理', value: 2 }
        ]
      }
    },
    watch: {
      barcodeType (val) {
        this.form.setFieldsValue(
          {
            barcodeType: val
          }
        )
        let qty = 1
        if (val === 0) {
          qty = ''
        }
        this.resetQty(qty)
      }
    },
    created () {
    },
    activated () {
      this.handleCancel()
      this.form.getFieldDecorator('qty', { initialValue: 1 })
      setTimeout(() => {
        this.$refs.materialInput.focus()
      }, 100)
    },
    mounted () {
    },
    methods: {
      add () {
        this.handleCancel()
      },
      removeScanedBarcode (code) {
        const newData = [...this.barcodes]
        newData.splice(this.barcodes.indexOf(code), 1)
        this.barcodes = newData
      },
      clearPreData () {
        this.currentData.barcode = ''
        if (!this.materialLock) {
          this.currentData.materialCode = ''
          this.currentData.materialName = ''
          this.currentData.materialModel = ''
          this.currentData.barcodeType = ''
          this.currentData.unit = ''
          this.currentData.qty = ''
        }
      },
      handleSubmit () {
        this.$emit('sure', this.currentData)
        this.$message.success('保存成功，请继续操作')
        this.barcodes.push(this.currentData.barcode)
        if (!this.materialLock) {
          this.form.resetFields()
          this.$refs.materialInput.focus()
        } else {
          this.$refs.barcodeInput.focus()
          this.resetQty(1)
          this.resetBarcode()
        }
      },
      handleCancel () {
        this.materialLock = false
        this.form.resetFields()
        this.currentData = { qty: 1 }
      },
      pressEnterMetarialCode () {
        const code = this.form.getFieldValue('materialCode')
        if (!code || code.length === 0) {
          this.$message.error('物料型号/编码不能为空')
          return
        }
        getOneForScan(code).then((res) => {
          if (res.success) {
            if (res.data) {
              this.currentData.materialCode = res.data.code
              this.currentData.materialName = res.data.name
              this.currentData.materialModel = res.data.model
              this.currentData.unit = res.data.unit
              this.currentData.barcodeType = res.data.manageType === 'SN' ? 1 : 2
              this.form.setFieldsValue(
                {
                  barcodeType: this.currentData.barcodeType
                }
              )
              this.$refs.barcodeInput.focus()
            } else {
              this.$message.error('该物料不存在:' + code)
            }
          } else {
            this.$message.error('查询物料信息失败:' + res.message)
          }
        })
      },
      pressEnterBarCode () {
        const barcode = this.form.getFieldValue('barcode')
        if (!barcode || barcode.length === 0) {
          this.$message.error('SN/LOT不能为空')
          return
        }
        if (this.barcodes.find(item => item === barcode)) {
          this.$message.error('该SN/LOT已扫描:' + barcode)
          this.resetBarcode()
        } else {
          selectByBarcode(barcode).then((res) => {
            if (res.success) {
              if (!res.data) {
                this.currentData.barcode = barcode
                if (this.currentData.barcodeType === 2) {
                  this.$refs.qtyInput.focus()
                } else {
                  this.handleSubmit()
                }
              } else {
                this.$message.error('该条码号已存在:' + barcode)
                this.resetBarcode()
                this.$refs.barcodeInput.focus()
              }
            } else {
              this.$message.error('条码信息异常:' + res.message)
              this.resetBarcode()
              this.$refs.barcodeInput.focus()
            }
          })
        }
      },
      pressEnterQty () {
        const qty = this.form.getFieldValue('qty')
        if (qty === null || qty === '' || !(validateNum(qty).result)) {
          this.$message.error('数量信息缺失或错误')
        } else {
          this.currentData.qty = qty
          this.handleSubmit()
        }
      },
      toggleMaterialLock () {
        if (this.materialLock) {
          this.materialLock = false
        } else {
          if (!this.currentData.materialCode) {
            this.$message.error('物料信息不存在，无法锁定')
          } else {
            this.materialLock = true
          }
        }
      },
      resetBarcode () {
        this.form.setFieldsValue(
          {
            'barcode': ''
          }
        )
      },
      resetQty (qty) {
        this.form.setFieldsValue(
          {
            'qty': qty
          }
        )
      },
      clearBarcodes () {
        this.barcodes = []
      }
    }
  }
</script>
<style lang="less">
  .ant-card-body {
      padding: 10px;
  }
</style>
